// import { getColor } from '@/utils/editor/defaultStyleUtil';

export default function (G6: any) {
	const lineDash = [4, 2, 1, 2];
	// 自定义曲线
	G6.registerEdge(
		'myCubicHorizontal',
		{
			options: {
				style: {},
			},
			// 绘制(注释该方法是为了继承cubic-horizontal的曲线路径样式，自定义的样式在afterDraw中设置)
			/*draw(cfg, group) {
      const startPoint = cfg.startPoint;
      const endPoint = cfg.endPoint;
      //const stroke = (cfg.style && cfg.style.stroke) || getColor(cfg.data.nodeType);
      let stroke = "#41369c";
      const shape = group.addShape('path', {
        attrs: {
          stroke: stroke,
          lineWidth: 1.2,
          lineAppendWidth: 20,
          endArrow: true,
          path: [
            ['M', startPoint.x, startPoint.y],
            ['L', endPoint.x, endPoint.y],
          ],
        },
        name: 'path-shape',
      });
      return shape;
    },*/
			afterDraw(cfg: any, group: any) {
				const childrens = group.get('children');
				if (childrens.length > 0) {
					childrens[0].setAttr('stroke', '#2beded');
					childrens[0].setAttr('lineWidth', 1.2);
					childrens[0].setAttr('lineAppendWidth', 20);
					childrens[0].setAttr('endArrow', true);
				}
			},
			// 响应状态变化
			setState(name: any, value: any, item: any) {
				const group = item.getContainer();
				const shapes = group.get('children');
				if (!shapes || shapes.length <= 0) {
					return;
				}
				const shape = shapes[0]; // 顺序根据 draw 时确定
				if (name === 'selected' || name === 'active') {
					if (value) {
						shape.attr('lineWidth', 3);
					} else {
						shape.attr('lineWidth', 1.2);
					}
				}
				if (name === 'running') {
					if (value) {
						let index = 0;
						shape.animate(
							() => {
								index++;
								if (index > 9) {
									index = 0;
								}
								const res = {
									lineDash,
									lineDashOffset: -index,
								};
								// return the params for this frame
								return res;
							},
							{
								repeat: true, // 动画重复
								duration: 10000, // 一次动画的时长
							}
						);
					} else {
						// 结束动画
						shape.stopAnimate();
						shape.attr('lineDash', null);
					}
				}
			},
		},
		'cubic-horizontal'
	);

	// 自定义线条
	G6.registerEdge('myLine', {
		itemType: 'edge',
		draw: function draw(cfg: any, group: any) {
			const startPoint = cfg.startPoint;
			const endPoint = cfg.endPoint;

			const Ydiff = endPoint.y - startPoint.y;

			const slope = Ydiff !== 0 ? 500 / Math.abs(Ydiff) : 0;

			const cpOffset = 16;
			const offset = Ydiff < 0 ? cpOffset : -cpOffset;

			const line1EndPoint = {
				x: startPoint.x + slope,
				y: endPoint.y + offset,
			};
			const line2StartPoint = {
				x: line1EndPoint.x + cpOffset,
				y: endPoint.y,
			};

			// 控制点坐标
			const controlPoint = {
				x: ((line1EndPoint.x - startPoint.x) * (endPoint.y - startPoint.y)) / (line1EndPoint.y - startPoint.y) + startPoint.x,
				y: endPoint.y,
			};

			let path = [
				['M', startPoint.x, startPoint.y],
				['L', line1EndPoint.x, line1EndPoint.y],
				['Q', controlPoint.x, controlPoint.y, line2StartPoint.x, line2StartPoint.y],
				['L', endPoint.x, endPoint.y],
			];

			if (Ydiff === 0) {
				path = [
					['M', startPoint.x, startPoint.y],
					['L', endPoint.x, endPoint.y],
				];
			}
			// const lineColor = getColor(cfg.data.type);
			const lineColor = '#41369c';
			const line = group.addShape('path', {
				attrs: {
					path,
					stroke: lineColor,
					lineWidth: 1.2,
					endArrow: true,
				},
				name: 'path-shape',
			});

			// const labelLeftOffset = 0;
			// const labelTopOffset = 8;
			// amount
			// const amount = group.addShape('text', {
			//   attrs: {
			//     text: cfg.data && cfg.data.amount,
			//     x: line2StartPoint.x + labelLeftOffset,
			//     y: endPoint.y - labelTopOffset - 2,
			//     fontSize: 14,
			//     textAlign: 'left',
			//     textBaseline: 'middle',
			//     fill: '#000000D9',
			//   },
			//   name: 'text-shape-amount',
			// });
			// type
			// group.addShape('text', {
			//   attrs: {
			//     text: cfg.data && cfg.data.type,
			//     x: line2StartPoint.x + labelLeftOffset,
			//     y: endPoint.y - labelTopOffset - amount.getBBox().height - 2,
			//     fontSize: 10,
			//     textAlign: 'left',
			//     textBaseline: 'middle',
			//     fill: '#000000D9',
			//   },
			//   name: 'text-shape-type',
			// });
			// date
			// group.addShape('text', {
			//   attrs: {
			//     text: cfg.data && cfg.data.date,
			//     x: line2StartPoint.x + labelLeftOffset,
			//     y: endPoint.y + labelTopOffset + 4,
			//     fontSize: 12,
			//     fontWeight: 300,
			//     textAlign: 'left',
			//     textBaseline: 'middle',
			//     fill: '#000000D9',
			//   },
			//   name: 'text-shape-date',
			// });
			return line;
		},
	});
}
